<nz-layout class="layout">
    <nz-header>
      <div nz-row>
        <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
            <h1 style="color: white; display: inline; " >请假管理系统</h1> 
        </div>
        <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
        </div>
        <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
            <button  *ngIf="this.currentUser != null" nz-button nz-popover nzTitle="个人信息" [nzContent]="currentUserInfo" nzPlacement="bottomLeft" style="margin-left:30%;">{{this.currentUser.eid}}</button>        
            <button style="margin-left:5px" nzOkText="确定" nzCancelText="取消" nz-popconfirm nzTitle="你确定退出吗？" (nzOnConfirm)="logout()" (nzOnCancel)="cancel()" nzPlacement="bottom" nz-button nzType="dashed" >登出</button>
        </div>
      </div>
    </nz-header>
    <nz-content style="padding:0 50px;">
      <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
        <ng-template #modalTitle>
          修改请假申请
        </ng-template>
        <ng-template #modalContent>
          <form nz-form [formGroup]="validateForm1" (ngSubmit)="submitForm()">
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假类型</nz-form-label>
              <nz-form-control [nzSm]="16" [nzXs]="24">
                  <nz-radio-group formControlName="formLayout1" [(ngModel)]="radioValue1" [nzButtonStyle]="'solid'">
                    <label nz-radio-button nzValue="1">事假</label>
                    <label nz-radio-button nzValue="2">病假</label>
                    <label nz-radio-button nzValue="3">婚假</label>
                    <label nz-radio-button nzValue="4">产假</label>
                    <label nz-radio-button nzValue="5">年假</label>
                  </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假区间</nz-form-label>
              <nz-form-control [nzSm]="16" [nzXs]="24">
                <nz-range-picker formControlName="rangePicker1" [nzDisabledDate]="disabledEndDate1"></nz-range-picker>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假理由</nz-form-label>
              <nz-form-control [nzSm]="16" [nzXs]="24">
                <textarea nz-input style="width:400px" placeholder="请输入请假理由" formControlName="comment1" [nzAutosize]="{ minRows: 4, maxRows: 4 }"></textarea>
              </nz-form-control>
            </nz-form-item>
          </form>
        </ng-template>
        <ng-template #modalFooter>
          <button nz-button nzType="default" (click)="handleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="handleOk()">确认</button>
        </ng-template>
      </nz-modal>
        <nz-tabset>
            <nz-tab nzTitle="我的主页">
              <!-- Content of Tab Pane 1 -->
              <div nz-row [nzGutter]="30">
                  <div nz-col [nzSpan]="10">
                    <nz-card nzTitle="正在休假员工">
                        <nz-table #basicTable [nzData]="dataSet">
                            <thead>
                              <tr>
                                <th style="text-align:center">工号</th>
                                <th nzCustomFilter style="text-align:center">
                                  姓名
                                  <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
                                    <i nz-icon type="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
                                    <div class="custom-filter-dropdown">
                                      <input type="text" nz-input placeholder="Search reason" [(ngModel)]="searchValueForAbsent">
                                      <button nz-button [nzType]="'primary'" (click)="searchForAbsent()">Search</button>
                                    </div>
                                  </nz-dropdown>
                                </th>
                                <th nzShowFilter [nzFilters]="filterLeaveTypeArray" (nzFilterChange)="filterLeaveTypeChangeForAbsent($event)" style="text-align:center">请假类型</th>
                                <th style="text-align:center">开始时间</th>
                                <th style="text-align:center">结束时间</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr *ngFor="let leave of this.absentEmployForSearch">
                                <td>{{leave.employee.eid}}</td>
                                <td>{{leave.employee.name}}</td>
                                <td>{{types[leave.type-1]}}</td>
                                <td>{{leave.starttime | date:'yyyy-MM-dd'}}</td>
                                <td>{{leave.endtime | date:'yyyy-MM-dd'}}</td>
                              </tr>
                                </tbody>
                          </nz-table>
                    </nz-card>
                  </div>
                  <div nz-col [nzSpan]="4">
                    <nz-card nzHoverable [nzCover]="coverTemplate" >
                      <nz-card-meta style="text-align:center" nzTitle="年假剩余天数"></nz-card-meta>
                    </nz-card>
                    <ng-template #coverTemplate>
                      <nz-progress [nzPercent]="percent" nzType="circle" [nzFormat]="formatOne"></nz-progress>
                    </ng-template>
                  </div>
                  
                  <div nz-col [nzSpan]="10">
                    <nz-card nzTitle="最近请假申请">
                      <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
                        <nz-tab nzTitle="未审批">
                          <nz-table #basicTable [nzData]="dataSet">
                            <thead>
                              <tr>
                                <th style="text-align:center">申请时间</th>
                                <th nzShowFilter [nzFilters]="filterLeaveTypeArray" (nzFilterChange)="filterLeaveTypeArrayForUnhleaves($event)" style="text-align:center">请假类型</th>
                                <th style="text-align:center">开始时间</th>
                                <th style="text-align:center">结束时间</th>
                                <th nzCustomFilter style="text-align:center" nzWidth="155px">
                                  请假理由
                                  <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
                                    <i nz-icon type="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
                                    <div class="custom-filter-dropdown">
                                      <input type="text" nz-input placeholder="Search reason" [(ngModel)]="searchValuesForUnhleaves">
                                      <button nz-button [nzType]="'primary'" (click)="searchForUnhleaves()">Search</button>
                                    </div>
                                  </nz-dropdown>
                                </th>
                                <th style="text-align:center">操作</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr *ngFor="let leave of this.UnhleavesForSearch">
                                <td>{{leave.submit | date:'yyyy-MM-dd'}}</td>
                                <td>{{types[leave.type-1]}}</td>
                                <td>{{leave.starttime | date:'yyyy-MM-dd'}}</td>
                                <td>{{leave.endtime | date:'yyyy-MM-dd'}}</td>
                                <td>{{leave.reason}}</td>
                                <td>
                                  <a (click)="showModal(leave)">修改</a>
                                  <nz-divider nzType="vertical"></nz-divider>
                                  <a (click)="deleteLeave(leave)">删除</a>
                                </td>
                              </tr>
                            </tbody>
                          </nz-table>
                        </nz-tab>
                        <nz-tab nzTitle="已被拒绝">
                          <nz-table #basicTable [nzData]="dataSet">
                            <thead>
                              <tr>
                                <th style="text-align:center">申请时间</th>
                                <th nzShowFilter [nzFilters]="filterLeaveTypeArray" (nzFilterChange)="filterLeaveTypeArrayForUnpassleaves($event)" style="text-align:center">请假类型</th>
                                <th style="text-align:center">开始时间</th>
                                <th style="text-align:center">结束时间</th>
                                <th nzCustomFilter style="text-align:center" nzWidth="110px">
                                  请假理由
                                  <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
                                    <i nz-icon type="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
                                    <div class="custom-filter-dropdown">
                                      <input type="text" nz-input placeholder="Search reason" [(ngModel)]="searchValuesForUnpassleaves">
                                      <button nz-button [nzType]="'primary'" (click)="searchForUnpassleaves()">Search</button>
                                    </div>
                                  </nz-dropdown>
                                </th>
                                <th style="text-align:center" nzWidth="90px">审批信息</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr *ngFor="let leave of this.UnpassleavesForSearch">
                                <td>{{leave.submit | date:'yyyy-MM-dd'}}</td>
                                <td>{{types[leave.type-1]}}</td>
                                <td>{{leave.starttime | date:'yyyy-MM-dd'}}</td>
                                <td>{{leave.endtime | date:'yyyy-MM-dd'}}</td>
                                <td>{{leave.reason}}</td>
                                <td>{{leave.message}}</td>
                                <td>
                                  <a (click) = "showModal(leave)">修改</a>
                                </td>
                              </tr>
                            </tbody>
                          </nz-table>
                        </nz-tab>
                      </nz-tabset>
                    </nz-card>
                  </div>
                </div>
            </nz-tab>
            <nz-tab nzTitle="所有请假记录">
              <!-- Content of Tab Pane 2 -->
              <nz-table #basicTable [nzData]="dataSet">
                    <thead>
                      <tr>
                        <th style="text-align:center">申请时间</th>
                        <th nzShowFilter [nzFilters]="filterLeaveTypeArray" (nzFilterChange)="filterLeaveTypeArrayForMyleaves($event)" style="text-align:center">请假类型</th>
                        <th style="text-align:center">开始时间</th>
                        <th style="text-align:center">结束时间</th>
                        <th nzCustomFilter style="text-align:center" nzWidth="400px">
                          请假理由
                          <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
                            <i nz-icon type="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
                            <div class="custom-filter-dropdown">
                              <input type="text" nz-input placeholder="Search reason" [(ngModel)]="searchValueForMyleaves">
                              <button nz-button [nzType]="'primary'" (click)="searchForMyleaves()">Search</button>
                            </div>
                          </nz-dropdown>
                        </th>
                        <th nzShowFilter [nzFilters]="filterLeaveStatusArrayForNow" (nzFilterChange)="filterLeaveStatusArrayForMyleaves($event)" style="text-align:center">审批状态</th>
                        <th style="text-align:center" nzWidth="400px">审批信息</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let leave of this.myleavesForSearch">
                        <td>{{leave.submit | date:'yyyy-MM-dd'}}</td>
                        <td>{{types[leave.type-1]}}</td>
                        <td>{{leave.starttime | date:'yyyy-MM-dd'}}</td>
                        <td>{{leave.endtime | date:'yyyy-MM-dd'}}</td>
                        <td>{{leave.reason}}</td>
                        <td>{{tabs[leave.state]}}</td>
                        <td>{{leave.message}}</td>
                      </tr>
                    </tbody>
                  </nz-table>
            </nz-tab>
            <nz-tab nzTitle="新增请假申请">
              <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
                <nz-form-item>
                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假类型</nz-form-label>
                  <nz-form-control [nzSm]="16" [nzXs]="24">
                      <nz-radio-group formControlName="formLayout" [(ngModel)]="radioValue" [nzButtonStyle]="'solid'">
                        <label nz-radio-button nzValue="1">事假</label>
                        <label nz-radio-button nzValue="2">病假</label>
                        <label nz-radio-button nzValue="3">婚假</label>
                        <label nz-radio-button nzValue="4">产假</label>
                        <label nz-radio-button nzValue="5">年假</label>
                      </nz-radio-group>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假区间</nz-form-label>
                  <nz-form-control [nzSm]="16" [nzXs]="24">
                    <nz-range-picker formControlName="rangePicker" [nzDisabledDate]="disabledEndDate"></nz-range-picker>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>请假理由</nz-form-label>
                  <nz-form-control [nzSm]="16" [nzXs]="24">
                    <textarea nz-input style="width:400px" placeholder="请输入请假理由" formControlName="comment" [nzAutosize]="{ minRows: 4, maxRows: 4 }"></textarea>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 16, offset: 8 }">
                    <button nz-button nzType="primary" (click)="Create()">提交</button>
                  </nz-form-control>
                </nz-form-item>
              </form>
            </nz-tab>
          </nz-tabset>
    </nz-content>
    <nz-footer style="text-align: center;"></nz-footer>
  </nz-layout>


  <!-- 当前登录用户的个人信息 -->
  <ng-template #currentUserInfo>
    <div>
      <p><strong>工号: </strong>{{this.currentUser.eid}}</p>
      <p><strong>姓名: </strong>{{this.currentUser.name}}</p>
      <p><strong>性别: </strong>{{this.currentUser.gender}}</p>
      <p><strong>手机号: </strong>{{this.currentUser.phone}}</p>
      <p><strong>级别：</strong>{{this.level}}</p>
      <button nz-button (click)="showEditCurrentUserPhone(this.currentUser.phone)" nzType="dashed">编辑</button>
      <button style="margin-left:5px"  (click)="showEditCurrentUserPassword()"  nz-button nzType="dashed">密码重置</button>
    </div>
  </ng-template>

  <!-- 编辑当前用户的信息 -->
  <nz-modal [(nzVisible)]="isVisibleOfEditCurrentUser" nzTitle="编辑信息" (nzOnCancel)="handleCancelEditCurrentUser()" (nzOnOk)="handleOkEditCurrentUser()">
    <input style="width: 200px; margin-top: 5px; margin-bottom: 5px" nz-input placeholder="输入手机号" nzSize="default" [(ngModel)]="this.currentUser.phone"><br/>
  </nz-modal>

  <!-- 编辑当前用户的密码 -->
  <nz-modal nzWidth="200" [(nzVisible)]="isVisibleOfEditCurrentUserPassword" nzTitle="密码重置" (nzOnCancel)="handleCancelEditCurrentUserPassword()" (nzOnOk)="handleOkEditCurrentUserPassword()">
    <form nz-form [formGroup]="passwordForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input type="password" placeholder="请输入密码" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()">
            <nz-form-explain *ngIf="passwordForm.get('password').dirty && passwordForm.get('password').hasError('required')">请输入密码</nz-form-explain>
            <nz-form-explain *ngIf="passwordForm.get('password').dirty && passwordForm.get('password').hasError('minlength')">最小长度为6</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input placeholder="确认密码" type="password" formControlName="checkPassword" id="checkPassword">
            <nz-form-explain *ngIf="passwordForm.get('checkPassword').dirty && passwordForm.get('checkPassword').errors">
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('required')">
                请再次输入密码
              </ng-container>
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('minlength')">
                最小长度为6
              </ng-container>
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('confirm')">
                两次密码不匹配
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </form>
  </nz-modal>
